<template>
  <el-pagination
    v-if="props.pagination"
    class="mt15"
    :current-page="props.page"
    :page-size="props.limit"
    :page-sizes="props.pageSizes"
    :pager-count="props.count"
    :layout="layout"
    :total="props.total"
    :background="props.background"
    :hide-on-single-page="props.singlehide"
    v-bind="$attrs"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { getCurrentInstance, onUnmounted, ref } from 'vue';
const props = defineProps({
	total: {
		required: true,
		type: Number,
	},
	page: {
		type: Number,
		default: 1,
	},
	limit: {
		type: Number,
		default: 10,
	},
	count: {
		type: Number,
		default: 7,
	},
	pageSizes: {
		type: Array,
		default() {
			return [10, 20, 30, 40, 50, 100];
		},
	},
	background:{
		type:Boolean,
		default:true
	},
	singlehide:{
		type:Boolean,
		default:false
	},
	pagination:{
		type:Boolean,
		default:true
	}
});
const { proxy } = getCurrentInstance() as any;
const emit = defineEmits(['onPageChange']);
const handleSizeChange = (val: number) => {
	emit('onPageChange', { page: props.page, limit: val });
};
const handleCurrentChange = (val: number) => {
	emit('onPageChange', { page: val, limit: props.limit });
};
const layout = ref('total, sizes, prev, pager, next, jumper');
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
proxy.mittBus.on('layoutMobileResize', (res: any) => {
	layout.value =
		res.clientWidth < 1000 ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper';
});
onUnmounted(() => {
	proxy.mittBus.off('layoutMobileResize');
});
</script>

<style lang="scss" scoped></style>
